<script setup lang="ts">
import { useDarkMode, useToggleDarkMode } from "@/hooks/useToggleDarkMode";
import { reactive, ref, onMounted, watch } from "vue";
import { useRoute } from 'vue-router'

const onClickRight = (event: TouchEvent | MouseEvent) => {
  useToggleDarkMode(event);
};
const showBackButton = ref(true); // 加载状态
const onClickLeft = () => {
  console.log("返回按钮被点击");
  history.back();
}

const route = useRoute()  // 获取当前路由

// 控制返回按钮是否显示的函数
const checkBackButtonVisibility = () => {
  console.log(route.path);
  // 不需要返回按钮的路由
  showBackButton.value = route.path !== '/home'
    && route.path !== '/info'
    && route.path !== '/question'
    && route.path !== '/zhufang'
}

// 监听路由变化来控制返回按钮显示
watch(route, checkBackButtonVisibility)

// 初始化时检查是否显示返回按钮
onMounted(() => {
  checkBackButtonVisibility()
})
</script>

<template>
  <van-nav-bar fixed placeholder @click-right="onClickRight" style="
      --van-nav-bar-height: 64px;
      --van-nav-bar-background: url(/h5/topbg1.png) no-repeat; 
      background-size: cover; /* 或 contain */
      background-position: center;
      background-repeat: no-repeat;
    ">
    <template #left>
      <div>
        <div style="
          position: absolute;
          top: 16px;
          left: 6px;
        ">
          <van-icon v-if="showBackButton" name="arrow-left" size="30" color="#fff" @click="onClickLeft" />
        </div>

      </div>
    </template>
    <template #title>
      <img style="height:64px; margin-left: -px" src="~@/assets/logo-title.png" alt="" />
    </template>
    <template #right>
      <!-- <svg-icon class="text-[18px]" :name="useDarkMode() ? 'light' : 'dark'" /> -->
      <!-- <img style="height:64px; margin-left: -px" src="~@/assets/logo-title.png" alt="" /> -->
    </template>
  </van-nav-bar>
</template>

<style scoped>
::v-deep .van-nav-bar__title {
  max-width: 80%
}
</style>
